const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //用于把HTML页面放入内存
// const vueload=require("vue-loader/lib/plugin")
const minicss = require("mini-css-extract-plugin"); //webpack4.0以后的打包css文件
// const optimizecssassetswebpackplugin = require("optimize-css-assets-webpack-plugin"); //压缩如果你使用ui组件库已经压缩的css就别必要了
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const webpackbar = require("webpackbar");
const htmlplugin = new HtmlWebpackPlugin({
  template: path.join(__dirname, "./src/index.html"), //源头文件
  filename: "index.html", //生成首页的文件名称
  minify: {
    removeAttributeQuotes: true,
    collapseWhitespace: true,
  },
});
const css = new minicss({
  //输出css独立文件
  filename: "./static/css/[name].css",
  chunkFilename: "[name].css", //或者id
});
module.exports = (ctx,next) => {
  console.log(ctx,next)
  let config = {
    //webpack基于node构建的
    mode: "production",
    entry: ["./src/index.js"],
    output: {
      filename: "./static/js/main.[hash:8].js", //通过热加载输出script文件挂载在目录与index.HTML一样
      path: path.resolve(__dirname, "dist"),
    },
    //production 提供了约定大于配置 约定打包文件是src/index ->dist/main
    plugins: [
      htmlplugin,
      //    new vueload() ,
      css,
      new webpackbar(),
      new CleanWebpackPlugin(),
      new CopyWebpackPlugin([
        {
          from: path.resolve(__dirname, "./static"),
          to: "./static",
          ignore: [".*"],
        },
      ]),
      //    new clernWebpackPlugin('./dist')
    ],
    module: {
      //所以第三方模块的配置规则
      rules: [
        {
          test: /\.js|.jsx$/,
          loader: "babel-loader",
          exclude: /node_modules/,
        },
        {
          test: /\.scss$/,
  
          use: [
            { loader: minicss.loader },
            {
              loader: "css-loader",
              options: { modules: true },
            },
            "sass-loader",
          ],
        },
  
        // { test:/\.js|\jsx$/,use:[{loader:"babel-loader",options:{cacheDirectory:true}}],exclude:/node_modules/},//一个属性use:"babel-loader"两个是数组
        // // { test:/\.css/,use:['style-loader','css-loader']},
        { test: /\.css$/, use: [{ loader: minicss.loader }, "css-loader"] },
        //     { test:/\.scss/,use:['style-loader',  {loader: "css-loader",
        //     options: {//这个是react的css模块化
        //        modules: {
        //            localIdentName: "[path][name]-[local]-[hash:5]"
        //        }//import css from '路径' console.log(css)会生成模块
        //        //这是react的处理办法 vue就是style里面写scoped
        //        //支持id与class 控制台输出的模块是健对值形式
        //     }//css scss less一样的配置模块化
        //    }]},
        {
          test: /\.(png|jpe?g|gif|svg|jpg)(\?.*)?$/,
          type: 'asset'
          // loader: "url-loader",
          // options: {
          //   limit: 1024,
          //   name: "static/img/[name].[ext]",
          // },
        },
        {
          test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
          type: 'asset'
          // loader: "url-loader",
          // options: {
          //   limit: 1024,
          //   name: "static/media/[name].[ext]",
          // },
        },
        {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          type: 'asset'
          // loader: "url-loader",
          // options: {
          //   limit: 1024,
          //   name: "static/fonts/[name].[ext]",
          // },
        },
        //    { test:/.vue$/,use:[{loader:"vue-loader"}]},
      ],
    },
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false,
            },
            compress: {
              drop_debugger: true,
              drop_console: true,
            },
          },
        }),
      ],
      splitChunks: {
        chunks: 'all',
      },
    },
    devtool: "cheap-module-source-map", //inline把js打包在一个文件里面 hidden分离出来 eval也是分离
    // optimization:{//代码分割 下面vendors就是分割代码之后(把相同的库或者文件都提出来打包) 你可能在想css文件去哪了 你注销代码分割 你可以看见css文件夹
    //     splitChunks:{
    //         chunks:"all"
    //     }
    // },
    resolve: {
      // 将 `.ts` 添加为一个可解析的扩展名。
      extensions: [".js", ".jsx", ".tsx", ".json"],
    },
  
    performance: {
      hints: "warning", //false关闭提示 下面设置就没必要了
      //入口起点的最大体积
      maxEntrypointSize: 50000000,
      //生成文件的最大体积
      maxAssetSize: 30000000,
      //只给出 js 文件的性能提示
      assetFilter: function (assetFilename) {
        return assetFilename.endsWith(".js");
      },
    },
  };
  return config;
}
